import { useLocalStorage } from '@vueuse/core'

export const useSystemStore = defineStore(
  'system',
  () => {
    const layout = reactive({
      // 菜单宽度
      menuWidth: 200,
      // 菜单折叠
      menuCollapse: false,
      // 菜单是否收缩（移动端）
      widthShrink: false,
      // 高度是否收缩
      heightShrink: false,
      // 菜单动画
      mainAnimation: 'slide-right',
      // 菜单是否唯一展开
      menuUniqueOpened: false,
    })

    globalThis.addEventListener('resize', onResize)
    onResize()

    // 监听窗口变化
    function onResize() {
      layout.widthShrink = globalThis.innerWidth < 800
      layout.menuCollapse = layout.widthShrink
    }

    return {
      layout,
    }
  },
  {
    persist: {
      enabled: true,
      strategies: [
        {
          storage: sessionStorage,
          paths: ['layout'],
        },
      ],
    },
  },
)
